<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>javascript 阶段</title>
    <style>
        .box {
            width: 100px;
            height: 100.99px;
            border: 1px solid #f00;
            padding: 10px;
            background-color: #ccc;
        }

        /* 盒子实际大小： border + padding + content */
        /* 盒子实际大小 高度： 2 + 20 + 100 = 122*/
        /* 盒子实际大小 宽度： 2 + 20 + 100 = 122*/

        .demo {
            position: relative;
        }
        .box::after {
            content: "";
            display: block;
            width: 200px;
        }
    </style>
</head>
<body>
    <div class="demo"> <div class="box">盒子</div> </div>

    <script>
        // 获取box标签
        var box = document.querySelector(".box");
        // 获取元素的尺寸有以下注意事项：
        // 注意1：
        // box.style.width = "100px";// 
        // console.log(box.style.width);// 主要是写入,不是读取,获取不到属性值

        // 注意2：
        console.log(box.offsetWidth);// 122  获取元素的实际宽度
        // console.log(box.offsetHeight);// 122  获取元素的实际高度
        console.log(box.offsetLeft,'offsetLeft');// 8    box标签距离可视区域左边的间距
        // console.log(box.offsetTop,'offsetTop');// 8   box标签距离可视区域顶部的间距
        // console.log(box.offsetParent);// body 默认的偏移父元素
        // 如果使用offset系列属性，需注意是否父元素，父元素是否设置定位属性

        // 注意3：
        // window
        // window.getComputedStyle(参数1,伪类元素)
        // window.getComputedStyle(参数1,null)
        // 参数1： dom对象
        // 参数2： 伪类元素

        // 返回值： dom样式对象
        // 获取指定元素的样式对象
        var option = window.getComputedStyle(box);
        // console.log(option.width);// 100px
        console.log(option.height);// 100.984px 

        // 获取指定伪类元素的样式对象
        var obj = window.getComputedStyle(box,"after");
        console.log(obj.width);// 200px
    </script>
</body>
</html>